<template>
	<div>
		<div class="header">
			<div class="head-top">
				<mt-header title="我的收藏">
					<router-link to="/myself" slot="left">
						<mt-button icon="back"></mt-button>
					</router-link>
					<mt-button v-if='copy' slot="right" @click="copyreaders">编辑</mt-button>
					<mt-button v-else slot="right" @click="deselect">取消</mt-button>
				</mt-header>
			</div>
			<mt-navbar class="home-nav" v-model='active'>
				<mt-tab-item class='nav-title' id='mybooks'>图书</mt-tab-item>
				<mt-tab-item class='nav-title' id='myperiodical'>期刊</mt-tab-item>
				<mt-tab-item class='nav-title' id='mynewspaper'>报纸</mt-tab-item>
				<mt-tab-item class='nav-title' id='myvideo'>视听</mt-tab-item>
				<mt-tab-item class='nav-title' id='myread'>悦读</mt-tab-item>
			</mt-navbar>
		</div>
		<div class="main">
			<mt-tab-container v-model="active" swipeable>
				<mt-tab-container-item id="mybooks">
					<mybooks :options="options"></mybooks>
				</mt-tab-container-item>
				<mt-tab-container-item id="myperiodical">
					<myperiodical :options="options"></myperiodical>
				</mt-tab-container-item>
				<mt-tab-container-item id="mynewspaper">
					<mynewspaper :options="options"></mynewspaper>
				</mt-tab-container-item>
				<mt-tab-container-item id="myvideo">
					<myvideo :options="options"></myvideo>
				</mt-tab-container-item>
				<mt-tab-container-item id="myread">
					<myread :options="options"></myread>
				</mt-tab-container-item>
			</mt-tab-container>
		</div>
	</div>
</template>

<script>
import mybooks from "./collectlist/mybooks.vue";
import myperiodical from "./collectlist/myperiodical.vue";
import mynewspaper from "./collectlist/mynewspaper.vue";
import myvideo from "./collectlist/myvideo.vue";
import myread from "./collectlist/myread.vue";
export default {
  components: {
    mybooks,
    myperiodical,
    mynewspaper,
    myvideo,
    myread
  },
  name: "collect",
  data() {
    return {
      active: "mybooks",
      options: false,
      copy: true,
      userid: "",
      listdata: []
    };
  },
  watch: {
    active(curVal, oldVal) {
      this.options = false;
      this.copy = true;
    }
  },
  methods: {
    copyreaders() {
      this.copy = false;
      this.options = true;
    },
    deselect() {
      this.copy = true;
      this.options = false;
    }
  }
};
</script>

<style scoped>
/*navbar-swper滑动颜色*/

.mint-navbar .mint-tab-item.is-selected {
  border-bottom: 1px solid #e60012;
  color: #e60012;
}

.home-nav {
  margin-bottom: 20px;
  border-bottom: 1px solid #fafafa;
}

.mint-navbar .mint-tab-item.is-selected {
  margin-bottom: -2px;
}
</style>